<template>
	<view class="setcontainer">
		<view class="avatarinfo">
			<div class="avatar" @click="gotoinfo">
				<img :src="avatarUrl"></img>
			</div>
			<view class="xiangxi">
				<view><text class="numparm">{{gz}}</text><text>关注</text></view>
				<view><text class="numparm">{{fs}}</text><text>粉丝</text></view>
			</view>
		</view>
		<view style=" padding: 0.6rem;height: 80%;overflow: auto;">
		 <uni-list style="margin-top: 2rem;">
		<uni-list-item showArrow title="手机号码":thumb="imgurl.usr1"  thumb-size="sm"/>
		<uni-list-item showArrow title="账号与安全" :thumb="imgurl.usr2"  thumb-size="sm"/>
		</uni-list>
		<uni-list>
		<uni-list-item showArrow title="我的帖子" :thumb="imgurl.usr3"  thumb-size="sm"/>
		<uni-list-item showArrow title="我的回复" :thumb="imgurl.usr4"  thumb-size="sm"/>
		<uni-list-item showArrow title="我的收藏" :thumb="imgurl.usr5"  thumb-size="sm"/>
		<uni-list-item showArrow title="浏览记录" :thumb="imgurl.usr6"  thumb-size="sm"/>
		</uni-list>
		<uni-list>
		<uni-list-item showArrow title="下载管理" :thumb="imgurl.usr7"  thumb-size="sm"/>
		</uni-list>
		<uni-list>
		<uni-list-item showArrow title="消息通知" :thumb="imgurl.usr8"  thumb-size="sm"/>
		<uni-list-item showArrow title="隐私" :thumb="imgurl.usr9"  thumb-size="sm"/>
		</uni-list>
		<button class="black" @click="ceshitoken" type="default">退出登录</button>
		<view class="kogb"></view>
		</view>
	</view>
</template>

<script>
	import {
		useredit
	} from '@/request/app.js'
	import websocketManager from '@/websocketService.js';
	export default {
		
		data() {
			 
			return {
				avatarUrl:this.$store.state.imageurl,
				imgurl:{
					usr1:require('@/static/fonts/telephone.png'),
					usr2:require('@/static/fonts/security.png'),
					
					usr3:require('@/static/fonts/file.png'),
					usr4:require('@/static/fonts/comment.png'),
					usr5:require('@/static/fonts/fabulous.png'),
					usr6:require('@/static/fonts/chart-pie.png'),
					
					usr7:require('@/static/fonts/direction-down.png'),
					
					usr8:require('@/static/fonts/training.png'),
					usr9:require('@/static/fonts/unlock.png'),
					usr11:require('@/static/fonts/switch.png'),
					usr12:require('@/static/fonts/work.png'),
					
					usr13:require('@/static/fonts/user.png'),
					usr14:require('@/static/fonts/elipsis.png'),
					
				},
				gz:this.$store.state.concernnum,
				fs:this.$store.state.fansnum,
			};
		},

		mounted() {

		},

		methods: {
			gotoinfo(){
			uni.navigateTo({
				url: '/pages/set/component/info' // 注意路径格式  
			});
			},
			ceshitoken() {
				websocketManager.close()
				uni.reLaunch({
					url: '/pages/index/index' // 注意路径格式  
				});
				this.$store.dispatch('stopTokenCheck');
				this.$store.commit("quit")
				uni.removeStorageSync('id')
				uni.removeStorageSync('token')
				uni.removeStorageSync('refreshToken')
			}
		},
	};
</script>
<style lang="less" scoped>
	.numparm{
		color: #1b497d;
		    font-size: 1.2rem;
		    margin-right: 0.5rem;
	}
	.avatarinfo{
		
		position: relative;
		display: flex;
		    background: #1b497d;
		    width: 100%;
		    height: 20%;
			min-height: 12rem;
		    flex-direction: column;
		    align-items: center;
		.avatar{
			margin-top: 2rem;
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
			    overflow: hidden;
			img{
				width: 3rem;
				height: 3rem;
				object-fit: cover;
			}
		}
		.xiangxi{
			    display: flex;
			    align-items: center;
			    justify-content: space-evenly;
			border-radius: 0.5rem;
			    position: absolute;
			    bottom: -2rem;
			width: 90%;
			height: 4rem;
			background: #FFF;
		}
	}
	.kogb{
		width: 100%;
		height: 3rem;
	}


	.black{
		background: #FFF;
		width: 100%;
	}
	.setcontainer{
		.uni-image{
				margin: 8px !important;
			}
		    height: 100%;
		// overflow: auto;
		    // display: flex;
		    flex-direction: column;
		    justify-content: flex-start;
		   
		    background-color: #f0f0f0;
			.uni-list{
				   margin-bottom: 0.6rem;
				       border-radius: 0.3rem;
				       overflow: hidden;
			}
	}
</style>
